<template>
    <div class="Contacts_item" 
    v-waves @click='onClick' >
        <div class="left_img" v-if="imgurl">
            <img :src="imgurl" alt="">
        </div>
        <div class="right_name border-bottom">
            <p class="name jiacu">{{title}}</p>
            <span v-if="isLink" class="link iconfont icon-jiantouarrow487"></span>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        to:[String, Object],
        imgurl:String,
        title:String,
        isLink:Boolean
    },
    data(){
        return {

        }
    },
    methods:{
        routerLink() {
            if (this.to) return this.$router.push(this.to);
        },
        onClick() {
            this.$emit('click');
            this.routerLink();
        },
         
    }

}
</script>


<style lang="scss" scoped>
.Contacts_item{
    display: flex;
    background: #fff;
    height: 4rem;
    .left_img{
        width: 3rem;
        height: 3rem;
        margin: 0.5rem 0rem 0.5rem 1rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .right_name{
        flex: 1;
        display: flex;
        justify-content:space-between;
        align-items: center;
        padding-left: 0.8rem;
        margin-right: 0.8rem;
        .name{
            font-size: 1rem;
        }
        .link{
            color: #ccc
        }
    }
}
.Contacts_item:active{
    background: $activity;
}
</style>

